<template>
    <!-- 结算中心/自动结算计划 -->
    <div class="settlementPlan">
        <div class="top_operation">
            <div class="every_operation" v-if="isRegionShow">
                <span><b style="color:red;">*</b> 大区：</span>
                <a-select
                    show-search
                    :filter-option="filterOption"
                    style="width: 195px" 
                    @change="regionChange" 
                    v-model="regionId" 
                    placeholder="请选择大区"
                >
                    <a-select-option :key="index" v-for="(item, index) in regionList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation" v-if="isCityShow">
                <span><b style="color:red;">*</b> 城市：</span>
                <a-select 
                    show-search
                    :filter-option="filterOption"
                    style="width: 195px" 
                    @change="cityChange" 
                    v-model="cityId"
                    placeholder="请选择城市"
                >
                    <a-select-option :key="index" v-for="(item, index) in cityList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation" v-if="isWareShow">
                <span><b style="color:red;">*</b> 仓库：</span>
                <a-select
                    show-search
                    :filter-option="filterOption" 
                    style="width: 195px" 
                    @change="warehouseChange" 
                    v-model="organizeId"
                    placeholder="请选择仓库"
                >
                    <a-select-option :key="index" v-for="(item, index) in warehouseList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>

            <div class="every_operation">
                <span>客户：</span>
                <a-select style="width: 195px"
                    show-search
                    :filter-option="filterOption"
                    @change="customerChange" 
                    v-model="customerCode" 
                    placeholder="请选择客户"
                    allowClear
                >
                    <a-select-option :key="index" v-for="(item, index) in customerList" :value="item.customerCode">
                        {{item.customerName}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation">
                <span>货主：</span>
                <a-select style="width: 195px" 
                    show-search
                    :filter-option="filterOption"
                    @change="handleChange" 
                    v-model="ownerCode"
                    placeholder="请选择货主"
                    allowClear
                >
                    <a-select-option :key="index" v-for="(item, index) in ownerList" :value="item.ownerCode">
                        {{item.ownerName}}
                    </a-select-option>
                </a-select>
            </div>

            <div class="every_operation">
                <span>账单类型：</span>
                <a-select style="width: 195px" 
                    show-search
                    :filter-option="filterOption"
                    @change="handleChange" 
                    v-model="billType"
                    placeholder="请选择账单类型"
                    allowClear
                >
                    <a-select-option value="CTOP">
                        客户支付结算账单
                    </a-select-option>
                    <a-select-option value="CTOE">
                        支付快递结算账单
                    </a-select-option>
                </a-select>
            </div>

            <div class="button_div" style="margin-top:10px;">
                <a-button type="primary" icon="search" @click="onSearch()">搜索</a-button>
                <!-- <a-button type="primary" icon="sync" style="margin-left:20px;" @click="onReset()">重置</a-button> -->
            </div>
        </div>

        <div class="table_div">
            <a-button type="primary" @click="addPlan()">新增结算计划</a-button>
            <div class="table_div_main">
                <a-table 
                    :loading="tableLoading"
                    :columns="columns" 
                    :data-source="data"
                    :pagination="false"
                    bordered
                    rowKey="id"
                >
                    <span slot="cycle" slot-scope="text, record" href="javascript:;">
                        <a-tooltip placement="top">
                            <template slot="title">
                            <span>{{getCycle(record)}}</span>
                            </template>
                            <span>{{getCycle(record)}}</span>
                        </a-tooltip>
                    </span>
                    <span slot="billType" href="javascript:;" slot-scope="text, record">
                        <span v-if="record.billType == 'CTOP'">客户支付结算账单</span>
                        <span v-else>支付快递结算账单</span>
                    </span>
                    <span slot="status" slot-scope="text, record" href="javascript:;">
                        <span v-if="record.status == 0">启动</span>
                        <span v-else>暂停</span>
                    </span>
                    <a slot="action" slot-scope="text, record" href="javascript:;">
                        <span style="margin-right:8px;" v-if="record.status == 1" @click="enableRow(record)">启动</span>
                        <span style="margin-right:8px;" v-if="record.status == 0" @click="enableRow(record)">暂停</span>
                        <span style="margin-right:8px;" @click="editRow(record)">编辑</span>
                        <span style="margin-right:8px;" @click="deleteRow(record)">删除</span>
                    </a>
                </a-table>
                <!-- 右滑抽屉 -->
                <a-drawer
                    :title="drawerTitle"
                    :placement="placement"
                    :closable="false"
                    :visible="visible"
                    @close="onClose"
                    width="640"
                >
                    <a-form-model
                        ref="ruleForm"
                        :model="form"
                        :rules="rules"
                        :label-col="labelCol"
                        :wrapper-col="wrapperCol"
                        labelAlign="left"
                    >
                        <a-form-model-item label="计划名称" prop="name">
                            <a-input
                                v-model="form.name"
                                placeholder="请输入计划名称"
                            />
                        </a-form-model-item>
                        <a-form-model-item label="结算客户" prop="customerCode">
                            <a-select
                                show-search
                                :filter-option="filterOption" 
                                style="width: 100%;" 
                                @change="formCustomerChange" 
                                v-model="form.customerCode"
                                placeholder="请选择结算客户"
                            >
                                <a-select-option :key="index" v-for="(item, index) in customerList" :value="item.customerCode">
                                    {{item.customerName}}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>

                        <a-form-model-item label="货主">
                            <a-select
                                show-search
                                :filter-option="filterOption" 
                                style="width: 100%;" 
                                @change="formOwnerChange" 
                                v-model="form.ownerCode"
                                placeholder="请选择货主"
                                allowClear
                            >
                                <a-select-option :key="index" v-for="(item, index) in form.ownerList" :value="item.ownerCode">
                                    {{item.ownerName}}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>

                        <a-form-model-item label="账单类型" prop="billType">
                            <a-select
                                show-search
                                :filter-option="filterOption" 
                                style="width: 100%;" 
                                v-model="form.billType"
                                placeholder="请选择账单类型"
                                allowClear
                            >
                                <a-select-option value="CTOP">
                                    客户支付结算账单
                                </a-select-option>
                                <a-select-option value="CTOE">
                                    支付快递结算账单
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>

                        <a-form-model-item label="账单模板" prop="template">
                            <a-select
                                show-search
                                :filter-option="filterOption" 
                                style="width: 100%;" 
                                @change="templateChange" 
                                v-model="form.template"
                                disabled
                            >
                                <a-select-option value="系统默认模板">
                                    系统默认模板
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item label="触发规则" prop="cron">
                            <a-input
                                v-model="form.cron"
                                placeholder="请设置"
                                disabled
                                style="width:280px;margin-right:10px;"
                            />
                            <a-button type="primary" @click="setRule()">设置规则</a-button>
                        </a-form-model-item>
                        <div>
                            <p>结算数据范围：</p>
                            触发时间的前
                            <a-input-number id="firstMonth" style="width:60px" v-model="form.month_begin" :min="0" @change="monthBeginChange" />
                            个月
                            <a-select
                                show-search
                                :filter-option="filterOption" 
                                style="width: 130px;margin-left:10px;" 
                                @change="dayBeginChange" 
                                v-model="form.day_begin"
                            >
                                <a-select-option value="每月第一天">
                                    每月第一天
                                </a-select-option>
                                <a-select-option value="每月最后一天">
                                    每月最后一天
                                </a-select-option>
                                <a-select-option value="指定天数">
                                    指定天数
                                </a-select-option>
                            </a-select>
                            <span v-if="this.form.day_begin === '指定天数'">
                                <a-input-number id="firstDay" style="width:60px;margin-left:10px;" v-model="form.day_begin_val" :min="1" :max="28" @change="dayBeginValChange" />
                                日
                            </span>
                            <a-time-picker :value="moment(form.time_begin, 'HH:mm:ss')" @change="timeBeginChange" style="margin-left:10px;" :allowClear="allowClear"/>
                        </div>
                        <p style="margin-top:14px;">至</p>
                        <div>
                            触发时间的前
                            <a-input-number id="secondMonth" style="width:60px" v-model="form.month_end" :min="0" @change="monthEndChange" />
                            个月
                            <a-select
                                show-search
                                :filter-option="filterOption" 
                                style="width: 130px;margin-left:10px;" 
                                @change="dayEndChange" 
                                v-model="form.day_end"
                            >
                                <a-select-option value="每月第一天">
                                    每月第一天
                                </a-select-option>
                                <a-select-option value="每月最后一天">
                                    每月最后一天
                                </a-select-option>
                                <a-select-option value="指定天数">
                                    指定天数
                                </a-select-option>
                            </a-select>
                            <span v-if="this.form.day_end === '指定天数'">
                                <a-input-number id="secondDay" style="width:60px;margin-left:10px;" v-model="form.day_end_val" :min="1" :max="28" @change="dayEndValChange" />
                                日
                            </span>
                            <a-time-picker :value="moment(form.time_end, 'HH:mm:ss')" @change="timeEndChange" style="margin-left:10px;" :allowClear="allowClear"/>
                        </div>

                        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" style="margin-top:20px;">
                            <a-button type="primary" @click="onSubmit">
                                确定
                            </a-button>
                            <a-button style="margin-left: 10px;" @click="cancelForm">
                                取消
                            </a-button>
                        </a-form-model-item>
                    </a-form-model>
                </a-drawer>

                <!-- 确认删除对话框 -->
                <DelModal 
                    :visible="deleteVisible"
                    :confirm-loading="deleteConfirmLoading"
                    @ok="deleteHandleOk"
                    @cancel="deleteHandleCancel"
                />

                <!-- cron表达式对话框 -->
                <JCronModal ref="innerVueCron" :data="form.cron" @ok="handleOK"></JCronModal>
            </div>
        </div>
    </div>
</template>

<script>
    const columns = [
        {
            title: '计划名称',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
            width: '200px',
            ellipsis: true,
        },
        {
            title: '结算客户',
            dataIndex: 'customerCode',
            key: 'customerCode',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '货主',
            dataIndex: 'ownerCode',
            key: 'ownerCode',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '账单类型',
            dataIndex: 'billType',
            key: 'billType',
            align: 'center',
            width: '145px',
            ellipsis: true,
            scopedSlots: { 
                customRender: 'billType' 
            },
        },
        {
            title: 'cron表达式',
            dataIndex: 'cronExpression',
            key: 'cronExpression',
            align: 'center',
            width: '180px',
            ellipsis: true,
        },
        {
            title: '下一次触发时间',
            dataIndex: 'nextTrigger',
            key: 'nextTrigger',
            align: 'center',
            width: '180px',
            ellipsis: true,
        },
        {
            title: '结算周期',
            dataIndex: 'cycle',
            key: 'cycle',
            scopedSlots: { 
                customRender: 'cycle' 
            },
            align: 'center',
            ellipsis: true,
        },
        {
            title: '运行状态',
            dataIndex: 'status',
            key: 'status',
            scopedSlots: { 
                customRender: 'status' 
            },
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        { 
            title: '操作', 
            dataIndex: 'action', 
            key: 'action', 
            scopedSlots: { 
                customRender: 'action' 
            },
            align: 'center',
            width: '180px',
            fixed: 'right',
        },
    ];

    import moment from 'moment'
    import JCronModal from "../../components/jeecg/modal/JCronModalPlan"
    import DelModal from '../../components/base/delModal.vue'
    import { getHeadquarters, getRegion, getCity, getWarehouse, getPlanList, deletePlan, enablePlan, gitCronList, addPlan, editPlan, getCustomerName, getOwnerName, } from '@/api/api'
    export default {
        name: "SettlementPlan",
        components: {
            JCronModal,
            DelModal,
        },
        data () {
            return {
                allowClear: false,
                cargoOwner: '', // 货主
                code: '',
                headquartersId: '', // 总部id
                regionId: undefined, // 大区id
                cityId: undefined, // 城市id
                organizeId: undefined, // 仓库id
                regionList: [],
                cityList: [],
                warehouseList: [],
                customerCode: undefined,
                customerList: [],
                ownerCode: undefined,
                ownerList: [],
                billType: undefined,
                isRegionShow: true,
                isCityShow: true,
                isWareShow: true,
                columns,
                data: [],
                tableLoading: false,
                visible: false,
                placement: 'right',
                drawerTitle: '结算计划',
                labelCol: { span: 7 },  
                wrapperCol: { span: 16 },
                firstDayShow: false,
                secondDayShow: false,
                form: {
                    name: '',
                    customerCode: '',
                    ownerList: [],
                    ownerCode: '',
                    billType: '',
                    template: '系统默认模板',
                    cron: '',
                    month_begin: 0,
                    day_begin: '每月第一天',
                    day_begin_val: '',
                    time_begin: '00:00:00',
                    month_end: 0,
                    day_end: '每月第一天',
                    day_end_val: '',
                    time_end: '00:00:00',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入计划名称', trigger: 'blur' },
                    ],
                    customerCode: [
                        { required: true, message: '请选择结算客户', trigger: 'change' },
                    ],
                    ownerCode: [
                        { required: true, message: '请选择货主', trigger: 'change' },
                    ],
                    billType: [
                        { required: true, message: '请选择账单类型', trigger: 'change' },
                    ],
                    template: [
                        { required: true, message: '请选择账单模板', trigger: 'change' },
                    ],
                    cron: [
                        { required: true, message: '请设置规则', trigger: 'blur' },
                    ],
                },
                deleteVisible: false,
                deleteConfirmLoading: false,
                id: '',
                ids: '',
                flag: 0,
                timeList: [],
                nextTrigger: '',
                cycleBegin: '',
                cycleEnd: '',
                addMode: true,
                validStatus: true,
            }
        },
        created() {
           this.getHeadquartersList() 
        },
        methods: {
            moment,
            setRule(){
                this.$refs.innerVueCron.show();
            },
            handleOK(val, value){
                this.form.cron = val;
                this.timeList = value
            },
            moment,
            // 选择框过滤
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
            // 选择器
            handleChange(value) {
                console.log(`selected ${value}`);
            },
            // 获取总部
            getHeadquartersList(){
                let params = {}
                getHeadquarters(params).then((res)=>{
                    if(res.success){
                        this.headquartersId = res.result.organizeOrgList[0].id
                        this.getRegionList()
                    }
                })
            },
            // 获取大区
            getRegionList(){
                let params = {id: this.headquartersId}
                getRegion(params).then((res)=>{
                    if(res.success){
                        this.regionList = res.result.organizeOrgList
                        if(this.regionList.length === 1){
                            this.regionId = this.regionList[0].id
                            this.getCityList()
                        }
                    }else{
                        this.$message.warning(res.message, 6)
                    }
                })
            },
            // 选择大区
            regionChange(value){
                this.regionId = value 
                this.cityId = undefined
                this.organizeId = undefined
                this.cityList = []
                this.warehouseList = []
                this.getCityList()
                this.customerCode = undefined
                this.customerList = []
                this.ownerCode = undefined
                this.ownerList = []
            },
            // 获取城市
            getCityList(){
                let params = {
                    areaIds: this.regionId
                }
                getCity(params).then((res)=>{
                    if(res.success){
                        this.cityList = res.result.organizeOrgList
                        if(this.cityList.length === 1){
                            this.cityId = this.cityList[0].id
                            this.getWarehouseList()
                        }
                    }
                })
            },
            // 选择城市
            cityChange(value){
                this.cityId = value
                this.organizeId = undefined
                this.warehouseList = []
                this.getWarehouseList()
                this.customerCode = undefined
                this.customerList = []
                this.ownerCode = undefined
                this.ownerList = []
            },
            // 获取仓库
            getWarehouseList(){
                let params = {
                    cityIds: this.cityId
                }
                getWarehouse(params).then((res)=>{
                    if(res.success){
                        this.warehouseList = res.result.organizeOrgList
                        if(this.warehouseList.length === 1){
                            this.organizeId = this.warehouseList[0].id
                            this.code = this.warehouseList[0].code
                            this.getCustomerName()
                        }
                    }
                })
            },
            // 选择仓库
            warehouseChange(value){
                this.organizeId = value
                for(var item of this.warehouseList) {
                    if(item.id === this.organizeId) {
                        this.code = item.code
                        this.customerCode = undefined
                        this.customerList = []
                        this.ownerCode = undefined
                        this.ownerList = []
                        this.getCustomerName()
                    }
                }
            },
            // 获取客户名称列表
            getCustomerName() {
                let params = {
                    whCode: this.code,
                }
                getCustomerName(params).then((res)=>{
                    if(res.success){
                        this.customerList = res.result
                    }else{
                        this.$message.warning(res.message, 6)
                    }
                })
            },
            // 选择客户
            customerChange() {
                this.ownerCode = undefined
                if(this.customerCode) {
                    this.getOwnerName()
                }
            },
            // 获取货主名称列表
            getOwnerName() {
                let params = {
                    whCode: this.code,
                    customerCode: this.customerCode,
                }
                getOwnerName(params).then((res)=>{
                    if(res.success){
                        this.ownerList = res.result
                    }else{
                        this.$message.warning(res.message, 6)
                    }
                })
            },
            // 搜索
            onSearch() {
                if( (this.regionId == '' || this.regionId == undefined) || (this.cityId == '' || this.cityId == undefined) || (this.organizeId == '' || this.organizeId == undefined) ){
                    this.$message.warning('搜索前请选择大区、城市和仓库！')
                }else{
                    this.getPlanList()
                }
            },
            getPlanList() {
                let params = {
                    whCode: this.code,
                    customerCode: this.customerCode,
                    ownerCode: this.ownerCode,
                    billType: this.billType,
                    delFlag: 0,
                }
                this.tableLoading = true
                getPlanList(params).then((res)=>{
                    this.tableLoading = false
                    if(res.success){
                        if(res.result && res.result.records){
                            this.data = res.result.records
                        }
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            // 新增结算计划
            addPlan() {
                if( this.regionId && this.cityId && this.organizeId ){
                    this.addMode = true
                    this.visible = true
                    if(this.validStatus === false){
                        this.$refs.ruleForm.resetFields()
                    }

                    this.form.name = ''
                    this.form.customerCode = undefined
                    this.form.ownerCode = undefined
                    this.form.ownerList = []
                    this.form.billType = undefined
                    this.form.cron = ''
                    this.form.month_begin = 0
                    this.form.day_begin = '每月第一天'
                    this.form.day_begin_val = ''
                    this.form.time_begin = '00:00:00'
                    this.form.month_end = 0
                    this.form.day_end = '每月第一天'
                    this.form.day_end_val = ''
                    this.form.time_end = '00:00:00'
                }else{
                    this.$message.warning('新增前请选择大区、城市、仓库和客户！')
                }
            },
            // 结算周期
            getCycle(record) {
                if(record.cycleBegin !== '' && record.cycleEnd !== ''){
                    var beginList = record.cycleBegin.split(';')
                    var endList = record.cycleEnd.split(';')
                    var beginStr = ''
                    var endStr = ''
                    if(beginList[1] !== '每月第一天' && beginList[1] !== '每月最后一天'){
                        beginStr = `前${beginList[0]}个月${beginList[1]}日${beginList[2]}`
                    }else{
                        beginStr = `前${beginList[0]}个月${beginList[1]}${beginList[2]}`
                    }
                    if(endList[1] !== '每月第一天' && endList[1] !== '每月最后一天'){
                        endStr = `前${endList[0]}个月${endList[1]}日${endList[2]}`
                    }else{
                        endStr = `前${endList[0]}个月${endList[1]}${endList[2]}`
                    }
                    return `${beginStr} 至 ${endStr}`
                    // return `前${beginList[0]}个月${beginList[1]}${beginList[2]} 至 前${endList[0]}个月${endList[1]}${endList[2]}`
                }
            },
            // 启用、暂停
            enableRow(record) {
                this.ids = record.id
                if(record.status === '1'){
                    this.flag = 0
                }else{
                    this.flag = 1
                }
                let params = {
                    ids: this.ids,
                    flag: this.flag,
                }
                enablePlan(params).then((res)=>{
                    if(res.success){
                        this.getPlanList()
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            // 编辑
            editRow(record) {
                this.id = record.id
                this.addMode = false
                this.visible = true
                this.form.name = record.name
                this.form.customerCode = record.customerCode

                // 通过客户查询货主名称列表
                if(this.form.customerCode){
                    let params = {
                        whCode: this.code,
                        customerCode: this.form.customerCode,
                        ownerCode:this.form.ownerCode
                    }
                    getOwnerName(params).then((res)=>{
                        if(res.success){
                            this.form.ownerList = res.result
                        }else{
                            this.$message.warning(res.message, 6)
                        }
                    })
                }

                this.form.ownerCode = record.ownerCode
                this.form.billType = record.billType
                this.form.cron = record.cronExpression
                this.nextTrigger = record.nextTrigger
                if(record.cycleBegin != '' && record.cycleEnd != ''){
                    var beginList = record.cycleBegin.split(';')
                    var endList = record.cycleEnd.split(';')
                    this.form.month_begin = beginList[0]
                    if(beginList[1] == '每月第一天' || beginList[1] == '每月最后一天'){
                        this.form.day_begin = beginList[1]
                        this.form.day_begin_val = ''
                    }else{
                        this.form.day_begin = '指定天数'
                        this.form.day_begin_val = beginList[1]
                    }
                    this.form.time_begin = beginList[2]
                    this.form.month_end = endList[0]
                    if(endList[1] == '每月第一天' || endList[1] == '每月最后一天'){
                        this.form.day_end = endList[1]
                        this.form.day_end_val = ''
                    }else{
                        this.form.day_end = '指定天数'
                        this.form.day_end_val = endList[1]
                    }
                    this.form.time_end = endList[2]
                }

            },
            // 删除
            deleteRow(record) {
                this.ids = record.id
                this.deleteVisible = true
            },
            // 删除确定
            deleteHandleOk() {
                let params = {
                    ids: this.ids
                }
                deletePlan(params).then((res)=>{
                    if(res.success){
                        this.getPlanList()
                        this.deleteVisible = false
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            // 删除取消
            deleteHandleCancel() {
                this.deleteVisible = false
            },
            onClose() {
                this.visible = false
            },
            // 操作规则表单
            onSubmit() {
                
                let begin = Number(this.form.month_begin)
                let end = Number(this.form.month_end)

                if( begin > end ){
                    this.doSubmit()
                }else if( begin == end ){
                    if(this.form.day_begin == this.form.day_end){
                        if(this.form.day_begin_val && this.form.day_end_val){
                            if(Number(this.form.day_begin_val) > Number(this.form.day_end_val)){
                                this.$message.warning('结算数据范围日期填写错误！')
                            }else if(Number(this.form.day_begin_val) < Number(this.form.day_end_val)){
                                this.doSubmit()
                            }else{
                                var aTime = new Date(`2020-7-15 ${this.form.time_begin}`).getTime()
                                var bTime = new Date(`2020-7-15 ${this.form.time_end}`).getTime()
                                if(bTime > aTime){
                                    this.doSubmit()
                                }else{
                                    this.$message.warning('结算数据范围时间填写错误！')
                                }
                            }
                        }else{
                            var aTime = new Date(`2020-7-15 ${this.form.time_begin}`).getTime()
                            var bTime = new Date(`2020-7-15 ${this.form.time_end}`).getTime()
                            if(bTime > aTime){
                                this.doSubmit()
                            }else{
                                this.$message.warning('结算数据范围时间填写错误！')
                            }
                        }
                    }else if(this.form.day_begin == '每月最后一天' && this.form.day_end == '每月第一天'){
                        this.$message.warning('结算数据范围日期填写错误！')
                    }else if(this.form.day_begin == '每月最后一天' && this.form.day_end == '指定天数'){
                        this.$message.warning('结算数据范围日期填写错误！')
                    }else if(this.form.day_begin == '指定天数' && this.form.day_end == '每月第一天'){
                        this.$message.warning('结算数据范围日期填写错误！')
                    }else{
                        this.doSubmit()
                    }
                }else{
                    this.$message.warning('结算数据范围月份填写错误！')
                }
                
            },
            doSubmit() {
                this.$refs.ruleForm.validate(valid => {

                    // 验证结算计划触发时间间隔不能大于31天
                    let begin = Number(this.form.month_begin)
                    let end = Number(this.form.month_end)
                    if(begin - end > 2){
                        this.$message.warning('结算数据范围最大不能超过31天！')
                        return
                    }
                    if(begin - end <= 2){
                        var monthSpace = begin - end
                        var aYear = '2020'
                        var aMonth = 7 - monthSpace
                        if(this.form.day_begin == '每月第一天'){
                            var aDay = '01'
                        }else if(this.form.day_begin == '每月最后一天'){
                            var aDay = '31'
                        }else{
                            if(this.form.day_begin_val < 10){
                                var aDay = '0' + this.form.day_begin_val
                            }else{
                                var aDay = this.form.day_begin_val
                            } 
                        }
                        var aTime = this.form.time_begin

                        var bYear = '2020'
                        var bMonth = 7
                        if(this.form.day_end == '每月第一天'){
                            var bDay = '01'
                        }else if(this.form.day_end == '每月最后一天'){
                            var bDay = '31'
                        }else{
                            if(this.form.day_end_val < 10){
                                var bDay = '0' + this.form.day_end_val
                            }else{
                                var bDay = this.form.day_end_val
                            } 
                        }
                        var bTime = this.form.time_end

                        var aDate = `${aYear}-${aMonth}-${aDay} ${aTime}`
                        var bDate = `${bYear}-${bMonth}-${bDay} ${bTime}`

                        var aNum = new Date(aDate).getTime()
                        var bNum = new Date(bDate).getTime()

                        if(bNum - aNum > 2678400000){
                            this.$message.warning('结算数据范围最大不能超过31天！')
                            return
                        }

                    }

                    if (valid) {
                        this.validStatus = true
                        if(this.timeList && this.timeList.length > 0){
                            this.nextTrigger = this.timeList[0]
                        }
                        if(this.form.day_begin == '指定天数'){
                            this.cycleBegin = `${this.form.month_begin};${this.form.day_begin_val};${this.form.time_begin}`
                        }else{
                            this.cycleBegin = `${this.form.month_begin};${this.form.day_begin};${this.form.time_begin}`
                        }
                        if(this.form.day_end == '指定天数'){
                            this.cycleEnd = `${this.form.month_end};${this.form.day_end_val};${this.form.time_end}`
                        }else{
                            this.cycleEnd = `${this.form.month_end};${this.form.day_end};${this.form.time_end}`
                        }

                        if(this.addMode){ // 新增
                            let params = {
                                whCode: this.code,
                                name: this.form.name,
                                customerCode: this.form.customerCode,
                                ownerCode: this.form.ownerCode,
                                billType: this.form.billType,
                                nextTrigger: this.nextTrigger,
                                cycleBegin: this.cycleBegin,
                                cycleEnd: this.cycleEnd,
                                cronExpression: this.form.cron,
                                template: '系统默认模板',
                            }
                            addPlan(params).then((res)=>{
                                if(res.success){
                                    this.visible = false
                                    if( this.regionId && this.cityId && this.organizeId ){
                                        this.getPlanList()
                                    }
                                }else{
                                    this.$message.warning(res.message)
                                }
                            })
                        }else{ // 编辑
                            let params = {
                                id: this.id,
                                name: this.form.name,
                                customerCode: this.form.customerCode,
                                ownerCode: this.form.ownerCode,
                                billType: this.form.billType,
                                nextTrigger: this.nextTrigger,
                                cycleBegin: this.cycleBegin,
                                cycleEnd: this.cycleEnd,
                                cronExpression: this.form.cron,
                                template: '系统默认模板',
                            }
                            editPlan(params).then((res)=>{
                                if(res.success){
                                    this.visible = false
                                    if( this.regionId && this.cityId && this.organizeId ){
                                        this.getPlanList()
                                    }
                                }else{
                                    this.$message.warning(res.message)
                                }
                            })
                        }
                        
                    } else {
                        this.validStatus = false
                        return false;
                    }
                });
            },
            // 取消
            cancelForm() {
                this.visible = false
            },
            // 表单客户
            formCustomerChange() {
                this.form.ownerCode = ''
                if(this.form.customerCode){
                    let params = {
                        whCode: this.code,
                        customerCode: this.form.customerCode,
                    }
                    getOwnerName(params).then((res)=>{
                        if(res.success){
                            this.form.ownerList = res.result
                        }else{
                            this.$message.warning(res.message, 6)
                        }
                    })
                }
            },
            // 表单货主
            formOwnerChange() {

            },
            // 模板
            templateChange(value) {
                console.log(value)
            },
            // 起始月份
            monthBeginChange(value) {
                this.form.month_begin = value
            },
            // 起始日期选择
            dayBeginChange(value) {
                this.form.day_begin = value
            },
            // 起始指定天数
            dayBeginValChange(value) {
                this.form.day_begin_val = value
            },
            // 起始时间
            timeBeginChange(time, timeString) {
                this.form.time_begin = timeString
            },
            // 截止月份
            monthEndChange(value) {
                this.form.month_end = value
            },
            // 截止日期选择
            dayEndChange(value) {
                this.form.day_end = value
            },
            // 截止指定天数
            dayEndValChange(value) {
                this.form.day_end_val = value
            },
            // 截止时间
            timeEndChange(time, timeString) {
                this.form.time_end = timeString
            },
        }
    }
</script>

<style lang="less" scoped>
    .settlementPlan{
        width: 100%;
        padding: 0 10px 10px 10px;
        font-style: Microsoft YaHei;
        background: #ffffff;
        box-sizing: border-box;
        .top_operation{
            margin-bottom: 10px;
            overflow: hidden;
            .every_operation{
                float: left;
                margin-top: 10px;
                margin-right: 20px;
                span{
                    display: inline-block;
                    width: 85px;
                }
            }
            .button_div{
                float: left;
                margin-top: 10px;
            }
        }
        .table_div{
            .table_div_main{
                margin-top: 10px;
            }
        }
    }
</style>